<template>
  <div class="nftpage">
    <!-- <div class="page-title">
			<img src="../assets/img/ico.png" alt="" srcset="">
			<p>NFT数据</p>
		</div> -->
    <el-row :gutter="20" type="flex" align="middle" justify="space-between">
      <el-col :span="6">
        <el-select
          v-model="searchTypes"
          placeholder="预售品类型"
          style="width: 100%"
          @change="handleChange()"
        >
          <el-option label="鞋子" value="1"></el-option>
          <el-option label="其他" value="0"></el-option> </el-select
      ></el-col>
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="6">
        <p class="tabbtn">
          <el-button @click="open()" type="primary">新增商品</el-button>
        </p></el-col
      >
    </el-row>
    <div class="list-box">
      <el-table
        :data="list"
        v-loading="loading"
        stripe
        style="width: 100%"
        header-row-class-name="headcss"
      >
        <el-table-column
          prop="Id"
          label="预售品id"
          align="center"
        ></el-table-column>
        <el-table-column prop="Types" label="预售商品类型" align="center">
          <template slot-scope="scope">
            {{ scope.row.Type == 1 ? "鞋子" : "其他" }}
          </template></el-table-column
        >

        <el-table-column
          prop="ProductId"
          label="产品编号"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="PlanNumber"
          label="剩余量"
          align="center"
        ></el-table-column>

        <el-table-column
          prop="SaleNumber"
          label="销售量"
          align="center"
        ></el-table-column>
        <el-table-column prop="Rate" label="折率" align="center">
          <template slot-scope="scope"> {{ scope.row.Rate }} 折 </template>
        </el-table-column>
        <el-table-column prop="Price" label="折后价" align="center">
        </el-table-column>
        <el-table-column
          prop="Start"
          label="预售开始时间"
          align="center"
        ></el-table-column>
        <el-table-column prop="Flag" label="状态" align="center">
          <template slot-scope="scope">
            {{
              scope.row.Flag == 0
                ? "未开发"
                : scope.row.Flag == 1
                ? "已开放"
                : "已售罄"
            }}
          </template>
        </el-table-column>
        <el-table-column
          prop="Time"
          label="设定时间"
          align="center"
        ></el-table-column>
      </el-table>
    </div>
    <div class="page-limit">
      <el-pagination
        @size-change="SizeChange"
        @current-change="CurrentChange"
        :current-page="currentPage"
        :page-size="size"
        layout="total, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <el-dialog title="新增商品" :visible.sync="dialogVisible" width="30%">
      <el-form :model="form">
        <el-form-item label="预售品类型" :label-width="formLabelWidth">
          <el-select
            v-model="form.Types"
            placeholder="预售品类型"
            style="width: 100%"
          >
            <el-option label="鞋子" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="预售品id" :label-width="formLabelWidth">
          <el-input v-model="form.ID"></el-input>
        </el-form-item>
        <el-form-item label="预售数量" :label-width="formLabelWidth">
          <el-input v-model="form.Number"></el-input>
        </el-form-item>
        <el-form-item label="折率" :label-width="formLabelWidth">
          <el-input v-model="form.Rate"></el-input>
        </el-form-item>
        <el-form-item label="预售开始时间" :label-width="formLabelWidth">
          <el-date-picker
            v-model="form.Start"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleAdd()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { salesProductList, addsalesProduct } from "@/utils/api";
import NFTSComponent from "@/components/nftsComponent.vue";
export default {
  components: { NFTSComponent },
  data() {
    return {
      currentPage: 1,
      searchTypes: "",
      size: 10,
      total: 0,
      list: [],
      loading: false,
      dialogVisible: false,
      formLabelWidth: 120,
      form: {
        Types: "1",
        ID: "",
        Number: "",
        Rate: "",
        Start: "",
      },
    };
  },
  mounted() {
    this._salesProductList();
  },
  methods: {
    async _salesProductList(searchTypes) {
      this.loading = true;
      let { data, response } = await salesProductList({
        size: this.size,
        page: this.currentPage - 1,
        Types: searchTypes ? searchTypes : 1,
        Id: 0,
      });
      let { Date, Total } = data;
      this.loading = false;
      this.total = Total;
      this.list = data;
    },
    SizeChange(size) {
      this.size = size;
      this.currentPage = 1;
      this._salesProductList();
    },
    CurrentChange(page) {
      this.currentPage = page;
      this._salesProductList();
    },
    open() {
      this.dialogVisible = true;
    },
    handleChange() {
      this._salesProductList(Number(this.searchTypes));
    },
    async handleAdd() {
      const form = this.form;
      const params = {};

      if (!form.ID) {
        this.$message.warning("预售品id不能为空");
        return;
      } else if (!form.Number) {
        this.$message.warning("预售数量不能为空");
        return;
      } else if (!form.Rate) {
        this.$message.warning("折率不能为空");
        return;
      } else if (form.Rate < 0.01 || form.Rate > 0.99) {
        this.$message.warning("折率不能小于 0.01, 且不能大于0.99");
        return;
      }

      for (let k in form) {
        params[k] = Number(form[k]);
      }

      const d = form.Start;
      if (!d) {
        params.Start = "-";
      } else {
        params.Start = d.getTime();
      }
      alert(JSON.stringify(params))
      const res = await addsalesProduct(params);
      if (res.response.msg !== "Ok") {
        this.$message.error(res.data);
      } else {
        this.dialogVisible = false;
        this.$message.success("添加成功");
        this._salesProductList();
        this.form = {
          Types: "1",
          ID: "",
          Number: "",
          Rate: "",
          Start: "",
        };
      }
    },
  },
};
</script>

<style scoped lang="scss">
.nftpage {
  padding: 20px 0 20px 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}
.page-limit {
  display: flex;
  justify-content: center;
  padding-top: 10px;
}
.list-box {
  flex: 1;
  padding-right: 20px;
}
.tabbtn {
  display: flex;
  justify-content: flex-end;
  padding: 10px;
  padding-right: 20px;
}
.btn1 {
  width: 70px;
  height: 40px;
  background: rgba(211, 12, 63, 0.99);
  border-radius: 5px;
  color: #fff;
  &:active {
    opacity: 0.8;
  }
}
.page-title {
  display: flex;
  align-items: center;
  padding-bottom: 20px;

  p {
    margin-left: 10px;
    font-size: 24px;
    color: #333333;
  }

  img {
    width: 24px;
  }
}
</style>
<style>
.el-table {
  border-radius: 5px;
}
.el-table th.el-table__cell {
  background-color: #2389fd !important;
  color: #fff;
}
.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
  background: #deeeff !important;
}
.el-table td.el-table__cell {
  border: none;
}
</style>
